<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
        }

        .myHeader {
            width: 100%;
            height: 100px;
            background: rgb(179, 192, 209);
        }

        .myFooter {
            width: 100%;
            height: 100px;
            background: rgb(179, 192, 209);
        }

        .my-content {
            display: flex;
            width: 100%;
            flex: 1;
        }

        .myAside {
            width: 300px;
            height: 100%;
            background: rgb(211, 220, 230);
        }

        .myMain {
            flex: 1;
            height: 100%;
            background: rgb(233, 238, 243);
        }

        .menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .menu-list li {
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 30px;
            box-sizing: border-box;
        }

        .menu-list li.active {
            color: #409EFF;
        }
    </style>
</head>
<body>
<div id="app">
    <my-header></my-header>

    <div class="my-content">
        <my-aside @to-parent="getAsideValue"></my-aside>

        <!-- 第三步，父组件将获取到的唯一标识，传到main组件中 -->
        <my-main :type="parentCurrentType"></my-main>
    </div>

    <my-footer></my-footer>
</div>

<script src="../20211018/vue.js"></script>
<script>
    // 子组件向父组件传递参数
    let myApp = new Vue({
        el: '#app',
        data: {
            parentCurrentType: ''
        },
        methods: {
            // 父组件接收参数，并保存
            getAsideValue (data) {
                console.log(data)
                this.parentCurrentType = data
            }
        },
        components: {
            myHeader: {
                template: `
                    <div class="myHeader">header</div>
                `
            },
            myAside: {
                template: `
                    <div class="myAside">
                        <ul class="menu-list">
                            <li
                                v-for="item in list"
                                :class="{active: currentType === item.value}"
                                @click="itemClick(item)">
                                {{item.label}}
                            </li>
                        </ul>
                    </div>
                `,
                data () {
                    return {
                        currentType: '',
                        list: [
                            {label: '用户管理', value: 'user'},
                            {label: '配置管理', value: 'sys'},
                            {label: '角色管理', value: 'role'},
                            {label: '定时任务', value: 'task'}
                        ]
                    }
                },
                methods: {
                    itemClick (item) {
                        // 第一步aside组件触发事件并且传递参数到父组件
                        this.currentType = item.value

                        this.$emit('to-parent', this.currentType)
                    }
                }
            },
            myMain: {
                props: {
                    type: {
                        type: String
                    }
                },
                // 第四步，用父组件传过来的唯一标识，进行动态判断
                template: `
                    <div class="myMain">
                        <div v-show="currentType === 'user'">用户管理</div>
                        <div v-show="currentType === 'sys'">配置管理</div>
                        <div v-show="currentType === 'role'">角色管理</div>
                        <div v-show="currentType === 'task'">定时任务</div>
                    </div>
                `,
                data () {
                    return {
                        // currentType: ''
                    }
                },
                computed: {
                    currentType () {
                        return this.type
                    }
                }
                // watch: {
                //     type (newValue) {
                //         console.log('123122112', newValue)
                //         this.currentType = newValue
                //     }
                // }
            },
            myFooter: {
                template: `
                    <div class="myFooter">footer</div>
                `
            }
        }
    })
</script>
</body>
</html>